<template>
  <div>
    <son2>
      <!-- 如果是默认插槽没有名字就直接v-slot拿到插槽内部传递的数据 -->
      <!-- <template v-slot="obj"> -->

        <!-- 默认插槽，建议不要简写 -->
      <!-- <template v-slot="obj"> -->

      <!-- <template #default="obj"> -->

        <!-- 废弃语法 -->
      <template slot-scope="obj">
        <p>我是上面的p标签 -- {{ obj }}</p>
      </template>


      <!-- <template v-slot:body="obj"> -->
      <!-- <template #body="obj"> -->

        <!-- 废弃语法 -->
      <template slot="body" slot-scope="obj">
        <!-- 默认情况下，是无法用到组件内部数据的 -->
        <!-- 默认情况下只能用到当前组件里的数据 -->
        <p>我是p标签 -- {{ obj }}</p>
      </template>
    </son2>

    <!--  -->
    <son1>
      <!-- 如果你传递的时候没给名字 -->
      <!-- 那都是给默认插槽的（也就是没写名字的插槽） -->
      <!-- <template v-slot:title> -->
      <template #title>
        <h3>望云鹏泡澡</h3>
      </template>

      <!-- 把这段内容给名字叫content的插槽 -->
      <!-- <template v-slot:content> -->
      <template #content>
        <img
          class="pic"
          src="https://img1.baidu.com/it/u=408169741,2746597491&fm=253&fmt=auto&app=138&f=JPEG?w=486&h=500"
          alt=""
        />
        <p>今天天气十分好</p>
        <p>班长来到桃花岛</p>
        <p>看见云鹏在洗澡</p>
        <p>抓起衣服赶紧跑</p>
      </template>

    </son1>
  </div>
</template>

<script>
import son1 from "./components/son1";
import son2 from "./components/son2";
export default {
  components: {
    son1,son2
  },
};
</script>

<style>
.pic {
  width: 80px;
}
</style>